<template>
  <div class="contain">
    <!-- <wangeditor :richData="ruleForm.systemContent" @getWangedditor="getWangedditor" :readonly="readonly"></wangeditor> -->
    <header>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="1"></el-option>
            <el-option label="区域二" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批部门">
          <treeselect></treeselect>
        </el-form-item>
        <el-form-item label="审批人">
          <repeatTreeSelect></repeatTreeSelect>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resert">重置</el-button>
        </el-form-item>
      </el-form>
    </header>
    <el-table :data="tableData" stripe style="width: 100%" border 
      :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center">
      </el-table-column>
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180" align="center">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip width="150">
      </el-table-column>
      <el-table-column prop="" label="操作" align="center">
        <template slot-scope="scoped">
          <el-button type="text" icon="el-icon-edit">编辑</el-button>
          <el-button type="text" icon="el-icon-view">查看</el-button>
          <el-button type="text" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination @getPage="getPage" :pageSize="formInline.pageSize" :pageNum="formInline.pageNum" :total="total"></pagination>
  </div>
</template>

<script>
import wangeditor from "@/components/wangeditor";
import pagination  from "@/components/pagination";
import treeselect from '@/components/treeSelect';
import repeatTreeSelect from '@/components/treeSelect/repeatLabelIndex.vue'
export default {

  components: {
    pagination,
    wangeditor,
    treeselect,
    repeatTreeSelect
  },
  data() {
    return {
      formInline: {
        user: '',
        region: '',
        pageSize: 1,
        pageNum: 10
      },
      total: 120,
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      // ruleForm: {
      //   systemContent: '<p>富文本你好！</p>'
      // },
      // readonly: true
    }
  },
  methods: {
    // 查询
    onSubmit() { },
    // 重置
    resert(){
      this.formInline.pageNum = 10
      this.formInline.pageSize = 1
    },
    // 翻页或者页面条数改变
    getPage(val){
      console.log(val);
      this.formInline = {...this.formInline, ...val}
      this.onSubmit()
    },
    // 选择发生变化
    handleSelectionChange(val){
      console.log(val);
    }
    // ```子组件调用的父组件的方法， ruleForm.systemContent为富文本的数据，接口返回的```
    // getWangedditor(val) {
    //   this.ruleForm.systemContent = val;
    // },
  }
}
</script>

<style lang="scss" scoped>
.contain {
  margin: 10px 20px;
}

::v-deep .w-e-full-screen-container {
  z-index: 99999 !important;
}
</style>